<template>
	<view>
		<view class="index">
			<view class="cardsBox">
				<view class="uni-padding-wrap">
					<view class="uni-flex uni-row" style="margin-bottom: 10rpx;">
						<view class="flex-item uni-bg-blue" @click="contactService"
						style="width:50%; text-align:center;height:100rpx;line-height: 100rpx;font-size:36rpx;margin-right:20rpx;">
							<text style="">联系客服</text>
						</view>
						<view class="flex-item uni-bg-blue" @click="attentionAccount"
						style="width:50%; text-align:center;height:100rpx;line-height: 100rpx;font-size:36rpx;margin-left:20rpx;">
							<text>关注公众号</text>
						</view>
					</view>
				</view>
				
				<wyb-popup ref="popupService" type="center" height="600" width="500" radius="6" :showCloseIcon="true">
					<view class="popup-content" style="padding-top:80rpx;">
						<view style="text-align:center;">
							<image style="width:400rpx;height:490rpx;" :src="imgUrl"></image>
						</view>
					</view>
				</wyb-popup>
				<wyb-popup ref="popupAccount" type="center" height="600" width="500" radius="6" :showCloseIcon="true">
					<view class="popup-content" style="padding-top:80rpx;">
						<view style="text-align:center;">
							<image style="width:400rpx;height:410rpx;" :src="imgUrl"></image>
						</view>
						<view style="text-align: center;">
							<text style="color:#999;font-size:30rpx;">{{imgText}}</text>
						</view>
					</view>
				</wyb-popup>
			</view>
			<view class="carousel">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<block v-for="(item,index) in slideshowImg" :key="index">
									<swiper-item>
										<image class="swiperImg" :src="src+item.path" mode=""></image>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>
				</view>
			</view>
			<view class="cards">
				<view class="title">-专业礼品卡回收-</view>
				<view class="cardsBox">
					<block v-for="(item,index) in listLength" :key="index">
						<view class="list">
							<view class="item" @click="goSellCard1(index)">
								<image :src="src+commodityClass[index*2].logo" mode=""></image>
								<view class="name">{{commodityClass[index*2].name}}</view>
							</view>
							<view class="item" @click="goSellCard2(index)">
								<image :src="src+commodityClass[index*2+1].logo" mode=""></image>
								<view class="name">{{commodityClass[index*2+1].name}}</view>
							</view>
						</view>
					</block>
					
				</view>
			</view>
			
			<uni-notice-bar showIcon="true" scrollable="true" single="true" backgroundColor="#fff" speed="10"
			 :text="notesText">
			 </uni-notice-bar>
			
			<!-- <view class="uni-padding-wrap" style="width: 100%;height: 90upx;position: relative;box-sizing: border-box;background-color: #fff;margin-bottom:20rpx;">
				<view class="page-section swiper" style="width: 100%;height: 80upx;">
					<view class="page-section-spacing" style="width: 100%;height: 80upx;">
						<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" style="width: 80%;height: 80upx;float: right;">
							<block v-for="(item,index) in notes" :key="index">
								<swiper-item style="width: 100%;height: 80upx;line-height: 80upx;">
									<view style="line-height: 80upx;">{{item}}</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
				<view class="_position display_row">
					<image class="imgs" src="../../static/images/notice.png" mode=""></image>
				</view>
			</view> -->
			
			<view class="hot">
				<view class="title">-热门回收-</view>
				<view class="hotcard">
					 <block v-for="(item,index) in hotCommodityList" :key="index">
						  <view class="hotI" @click="goSellCard(item.classId,item.id,item.hasCardNumber)">
							   <view class="">
								 <image :src="src+item.imgPath" ></image>
							   </view>
							   <view>{{item.name}}</view>
							   <view>{{item.discount}}折回收</view>
						  </view>
					 </block>
				</view>
			</view> 
			<!-- 客服
			<button v-if="this.type_!=3" class="kf" open-type="contact">
				<image src="../../static/images/kf.png"></image>
			</button>
			-->
		</view>
	</view>
</template>

<script>
	export default {
		
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		    }
		    return {
		      title: '首页',
		      path: '/pages/index/index'
		    }
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				scrollTop: 0,
				old: {
				    scrollTop: 0
				},
				src:'',
				slideshowImg:[],//轮播图数组
				commodityClass:[], 	// 卡类数组
				listLength:0,
				notes:[], // 公告数组
				notesText: '',	// 公告文本
				hotCommodityList:[],//热门回收数组
				token:'',//onShow时获取token存起来，以便每次发送请求都要重新获取
				type:'',
				imgUrl: '',
				imgText: ''
			}
		},
		async onShow(){
			if(this.type_==2){
				AlipayJSBridge.call('setTitle', {
				      title: '专注卡券回收服务—卖卡啦'
				    });
			}
			uni.showShareMenu()
			// this.src = this.url
			let _this = this
			this.token = uni.getStorageSync('token')
			if(this.token){
				await uni.request({
					url: this.url + '/mobile/indexData',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,// 默认值
						'token':this.token
					},
					data:{
						type:_this.sourceType
						// type:4,//抖音
					},
					success: (res) => {
						this.slideshowImg = res.data.data.slideshowImg
						//this.notes = res.data.data.notes
						this.listNotes(res.data.data.notes);
						res.data.data.hotCommodityList.forEach(function(value,index){
							value.discount = (value.discount*10).toFixed(1)
						})
						this.hotCommodityList = res.data.data.hotCommodityList
						this.commodityClass = res.data.data.commodityClass
						this.listLength = Math.ceil(this.commodityClass.length/2)
					}
				})
			}else{
				await uni.login({
					provider: 'weixin',
					success: function (res) {
						uni.request({
							url: _this.url + '/applet/getSessionKey',
							method:'GET',
							header: {
								'content-type': 'application/x-www-form-urlencoded' ,// 默认值
							},
							data:{
								code:res.code
							},
							success: (res) => {
								uni.setStorageSync('token',res.data.data.token)
								_this.token = res.data.data.token
								uni.request({
									url: _this.url + '/mobile/indexData',
									method:'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded' ,// 默认值
										'token':_this.token
									},
									data:{
										type:_this.sourceType
									},
									success: (res) => {
										_this.slideshowImg = res.data.data.slideshowImg
										_this.listNotes(res.data.data.notes);
										res.data.data.hotCommodityList.forEach(function(value,index){
											value.discount = (value.discount*10).toFixed(1)
										})
										_this.hotCommodityList = res.data.data.hotCommodityList
										_this.commodityClass = res.data.data.commodityClass
										_this.listLength = Math.ceil(_this.commodityClass.length/2)
									}
								})
							},
						})
					}
				});
				if(_this.type_==1){
					uni.request({
						url: _this.url + '/mobile/indexData',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded' ,// 默认值
						},
						data:{
							type:_this.type_
						},
						success: (res) => {
							_this.slideshowImg = res.data.data.slideshowImg
							_this.notes = res.data.data.notes
							res.data.data.hotCommodityList.forEach(function(value,index){
								value.discount = (value.discount*10).toFixed(1)
							})
							_this.hotCommodityList = res.data.data.hotCommodityList
							_this.commodityClass = res.data.data.commodityClass
							_this.listLength = Math.ceil(_this.commodityClass.length/2)
						}
					})
				}		
			}
		},
		onLoad(option) {
		},
		methods: {
			// 联系客服
			contactService() {
				this.imgUrl = 'http://api.szkdd.net/file/contactService.jpg'
				this.$refs.popupService.show()
			},
			// 关注公众号
			attentionAccount() {
				this.imgUrl = 'http://api.szkdd.net/file/attentionAccount.jpg'
				this.imgText = '识别上方二维码，关注微信公众号～'
				this.$refs.popupAccount.show()
			},
			scroll(e){
			    this.old.scrollTop = e.detail.scrollTop
			},
			goSellCard(fid,id,hasCardNumber){
				uni.setStorageSync('card1Id',fid)
				uni.setStorageSync('card2Id',id)
				uni.setStorageSync('hasCardNumber',hasCardNumber)
				uni.navigateTo({
					url: '../sellCard/sellCard'
				});
			},
			goSellCard1(index){
				uni.setStorageSync('card1Id',this.commodityClass[index*2].id)
				uni.switchTab({
					url: '../classification/classification'
				});
			},
			goSellCard2(index){
				uni.setStorageSync('card1Id',this.commodityClass[index*2+1].id)
				uni.switchTab({
					url: '../classification/classification'
				});
			},
			listNotes(notes) {
				if (notes) {
					this.notesText = '';
					for (var i = 0; i < notes.length; i++) {
						if (i > 0) {
							this.notesText += '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0';
						}
						this.notesText += notes[i].title
					}
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f6fa;
	}
	/* 顶部fixed */
	.top-title{
		width: 100%;
		height: 100upx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 999;
	}
	.top-title .content{
		width: 100%;
		text-align: center;
		line-height: 100upx;
		font-size: 40upx;
		color: #333;
	}
	.top-title image{
		width: 50upx;
		height: 50upx;
		position: absolute;
		right: 25upx;
		top: 25upx;
	}
	/* 轮播图 */
	.carousel{
		/* margin-top: 100upx; */
		width: 100%;
		height: 220upx;
	}
	.carousel .swiperImg{
		width: 100%;
		height: 100%;
	}
	swiper{
		height: 250upx;
	}
	/* 卡类图片 */
	.cards{
		width: 100%;
		height: 520upx;
		margin-top: 30upx;
		margin-bottom: 20upx;
		background-color: #fff;
	}
	.cards .title{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 34upx;
	}
	.cards .cardsBox{
		width: 100%;
		height: 400upx;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
	}
	.cards .cardsBox .list{
		width: 33%;
		height: 100%;
		/* float: left; */
		display: inline-block;
	}
	.cards .cardsBox .list .item{
		width: 100%;
		height: 200upx;
		padding: 0 5%;
		float: left;
		text-align: center;
	}
	.cards .cardsBox .list .item image{
		width: 170upx;
		height: 110upx;
		border-radius: 8upx;
	}
	.cards .cardsBox .list .item .name{
		width: 100%;
		text-align: center;
	}
	/* 公告 */
	._position {
		position: absolute;
		top: 0;
		left: 0;
		width: 160upx;
		height: 80upx;
	}
	.imgs {
		width: 100%;
		height: 100%;
	}
	.display_row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	/* 积分兑换 */
	.integral{
		width: 100%;
		height: 220upx;
		margin-bottom: 50upx;
	}
	.integral .title{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 34upx;
	}
	.integral .integralBox{
		width: 100%;
		height: 140upx;
		float: left;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;
	}
	.integral .integralBox .itemCard{
		width: 50%;
		height: 100%;
		display: inline-block;
		padding: 0 40upx;
		box-sizing: border-box;
	}
	.integral .integralBox .itemCard image{
		width: 300upx;
		height: 100%;
	}
	
	/* 热门回收 */
	.hot{
		width: 100%;
		margin-top: 20upx;
	}
	.hot .title{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 34upx;
		background-color: #fff;
		margin-bottom: 15upx;
	}
	.hot .hotCards{
		width: 100%;
	}
	.hot .hotCards .hotItem{
		background-color: #fff;
		width: 40.5%;
		float: left;
		margin-bottom: 30rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		display: inline-block;
		margin-left: 51rpx;
	}
/* 	.hot .hotCards .hotItem:nth-child(odd){
		margin-right:37upx;
	} */
	
	.hot .hotCards .hotItem .item-left{
		float: left;
		width: 60%;
		height: 100%;
		text-align: right;
	}
	.hot .hotCards .hotItem .item-left .name{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.hot .hotCards .hotItem .item-left .price{
		font-size: 30upx;
		color: #909090;
	}
	.hot .hotCards .hotItem .item-right{
		float: right;
		width: 100upx;
		height: 100upx;
	}
	.hot .hotCards .hotItem .item-right image{
		width: 100%;
		height: 100%;
	}
	.kf{
		position: fixed !important;
		top:780upx !important;
		right:10upx !important;
		background-color: rgba(0,0,0,0);
		border: 0;
	}
	.kf::after{
		border: 0;
	}
	.kf>image{
		width:60upx;
		height:60upx;
	}
	
	
.hotcard{
	 width:100%;
	 display: flex;
	 flex-wrap: wrap;
	 padding-left:8upx;
	 background-color: #fff;
}	
.hotI{
	 width:32%;
	 background: #fff;
	 text-align: center;
	 border:3upx solid #f5f6fa;
	 padding:10upx 0;
}
.hotI>view:first-child{
	text-align: center;
	width:90upx;
	height:90upx;
	margin: auto;
	box-sizing: border-box;
	padding-top:10upx;
}
.hotI>view{
	line-height: 38upx;
}
.hotI>view:nth-child(3){
	margin-top:5upx;
}
/* .hotI:nth-child(even){
	border-left:4upx solid #f5f6fa;
	border-right:4upx solid #f5f6fa;
} */
.hotI>view:nth-child(3){
	font-size:25upx;
	color:#6d6d6d;
}
.hotI image{
	width:65upx;
	height:65upx;
}
</style>
